// 带回显的月选择

<template>
    <div class="v-month-select-div">
        <span @click="show = true">
            {{dateStart}} 至 {{dateEnd}}
            <van-icon name="arrow-down" />
        </span>
        <van-calendar 
            v-model="show" 
            type="range" 
            @confirm="fnConfirm" 
            :max-date="maxDate" 
            :min-date="minDate"
            color="#1989fa"
            :default-date="defaultDate"
        />
    </div>
</template>

<script>
export default {
    props: {
        defValue: {
            type: Array,
            default: ()=>([])
        },
        format:{
            type:String,
            default:'yyyy-MM-dd'
        }
    },
    data () {
        return {
            show: false,
            checkDateStart: '',
            checkDateEnd: '',
            currentDate: new Date(),
        }
    },
    computed: {
        defaultDate(){
            return [new Date(this.dateStart),new Date(this.dateEnd)]
        },
        maxDate () {
            let year = new Date().getFullYear()
            return new Date(year, 11)
        },
        minDate () {
            let year = new Date().getFullYear()
            return new Date(year, -11)
        },
        dateStart () {
            let checkDate = this.$formatter.formatDate(new Date(),this.format);
            return this.checkDateStart || this.defValue[0] || checkDate || '请选择'
        },
        dateEnd () {
            let checkDate = this.$formatter.formatDate(new Date(),this.format);
            return this.checkDateEnd || this.defValue[1] || checkDate || '请选择'
        },
    },
    methods: {
        fnConfirm (date) {
            const [start, end] = date;
            this.checkDateStart = this.$formatter.formatDate(start,this.format);
            this.checkDateEnd = this.$formatter.formatDate(end,this.format);
            this.show = false

            this.$emit('confirm', [this.checkDateStart,this.checkDateEnd])
        },
    }
}
</script>

<style lang="less" scoped>
.v-month-select-div {
    flex: 1;
    width: 100%;
    height: 100%;

    > span {
        font-size: 13px;
        font-weight: 400;
        color: #61677A;
        line-height: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        /deep/  .vant-icon {
            margin-left: 6px;
        }
    }
}
</style>
